import React from 'react'
import Taro, { useReady, useRouter, useDidShow } from '@tarojs/taro'
import { useLocalStore, Observer } from 'mobx-react'
import { categoryGoodsModel } from '@/model/CategoryGoodsModel'
import { cartModel } from '@/model/CartModel'
import { View, ScrollView } from '@tarojs/components'
import { SideBar } from '@/components/SideBar'
import { GoodEle, Direction } from '@/components/Good'
import { Empty } from '@/components/Empty';
import Cart from '@/components/Cart'
import { SkeletonEle } from '@/components/Skeleton'

import './index.scss'
import { SubmitBarEle } from '@/components/SubmitBar'
import { sceneDesktopManager } from '@/model/SceneDesktopManger'

export default () => {
    const store = useLocalStore(() => categoryGoodsModel)
    const cartStore = useLocalStore(() => cartModel)
    const router = useRouter();

    useDidShow(() => {
        store.getData(router.params.id)
        sceneDesktopManager.setEle(router)
    });


    useReady(() => {
    })
    return (
        <Observer>
            {() =>
                <View className="xxm-goods-entry">
                    <View className="xxm-goods-entry__content">
                        <View className="xxm-goods-entry__menus">
                            <ScrollView scrollY style={{ height: '100%' }}>
                                <SideBar
                                    items={store.model.items}
                                    activeKey={store.model.activeKey}
                                    onChange={(it) => {
                                        store.setValue
                                        store.current = {
                                            id: it.id as number,
                                            name: it.title
                                        }
                                    }}
                                />
                            </ScrollView>
                        </View>
                        <View className="xxm-goods-entry__views">
                            <ScrollView scrollY style={{ height: '100%' }}>
                                {store.model.goods.map((it, idx) => (
                                    <SkeletonEle row={3} loading={store.loading} key={idx}>
                                        {
                                            !store.loading &&
                                            <GoodEle
                                                direction={Direction.COLUMN}
                                                id={it.id}
                                                img={it.main_pic}
                                                title={it.nick || it.name}
                                                desc={it.brief}
                                                price={it.price}
                                                oldPrice={it.market_price}
                                                discount={it.dis}
                                                customStyle={{ paddingRight: '13px' }}
                                                number={it.num && it.num || 0}
                                                onAdd={(num) => {
                                                    return cartStore.addCart({
                                                        number: num,
                                                        Good: it
                                                    })
                                                }}
                                            />
                                        }
                                    </SkeletonEle>
                                ))}
                                {
                                    (store.goods.filter(it => it).length === 0 && !store.loading) &&
                                    <Empty
                                        img="http://xmmi.oss-cn-beijing.aliyuncs.com/icon/no-data.png"
                                        desc="暂无相关数据"
                                    />
                                }
                            </ScrollView>

                        </View>
                    </View>
                    <View className="xxm-goods-entry__footer">
                        <SubmitBarEle
                            buttonText='去结算'
                            price={cartStore.totalFree}
                            // tip='你选择的商品可能上菜比较久'
                            currency="￥"
                            safeAreaInsetBottom
                            disabled={!cartStore.items.length}
                            onSubmit={() => {
                                Taro.navigateTo({ url: '/pages/checklist/checklist/index' });

                            }}
                        />
                    </View>
                    {
                        store.isLogin &&
                        <Cart visible></Cart>
                    }
                </View>
            }
        </Observer>
    )
}
